<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>区块链管理平台</title>
	<!-- Custom fonts for this template -->
	<link href="https://s0.pstatp.com/cdn/expire-1-M/font-awesome/5.1.0/css/all.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
		  rel="stylesheet">
	<!-- Custom styles for this template -->
	<link href="../css/sb-admin-2.min.css" rel="stylesheet">
	<link rel="icon" href="../img/zfsoft.ico">
	<!-- Custom styles for this page -->
	<link href="../vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../css/element.css">
</head>
<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

	<!-- Sidebar -->
	<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

		<!-- Sidebar - Brand -->
		<a class="sidebar-brand d-flex align-items-center justify-content-center" href="introduce.html">
			<div class="sidebar-brand-icon rotate-n-15">
				<i class="fas" >
					<img src="../img/zfsoft.ico" width="40" height="40"/>
				</i>
			</div>
			<div class="sidebar-brand-text mx-3">区块链管理平台</sup></div>
		</a>

		<!-- Divider -->
		<hr class="sidebar-divider my-0">

		<!-- Nav Item - Dashboard -->
		<li class="nav-item">
			<a class="nav-link" href="introduce.html">
				<i class="fas fa-fw fa-folder"></i>
				<span>使用向导</span></a>
		</li>

		<!-- Divider -->
		<hr class="sidebar-divider">

		<!-- Heading -->
		<div class="sidebar-heading">
			管理配置
		</div>

		<!-- Nav Item - Pages Collapse Menu -->
		<li class="nav-item active">
			<a class="nav-link collapsed" href="host.html"
			   aria-controls="collapseTwo">
				<i class="fas fa-fw fa-cog"></i>
				<span>主机管理</span>
			</a>
		</li>

		<!-- Nav Item - Utilities Collapse Menu -->
		<li class="nav-item">
			<a class="nav-link collapsed" href="organizations.html"
			   aria-controls="collapseUtilities">
				<i class="fas fa-fw fa-wrench"></i>
				<span>组织管理</span>
			</a>
		</li>

		<!-- Nav Item - Utilities Collapse Menu -->
		<li class="nav-item">
			<a class="nav-link collapsed" href="channel.html"
			   aria-controls="collapseUtilities">
				<i class="fas fa-fw fa-chart-area"></i>
				<span>通道管理</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link collapsed" href="net.html">
				<i class="fas fa-fw fa-table"></i>
				<span>网络管理</span>
			</a>
		</li>


	</ul>
	<!-- End of Sidebar -->

	<!-- Content Wrapper -->
	<div id="content-wrapper" class="d-flex flex-column">

		<!-- Main Content -->
		<div id="content">

			<!-- Topbar -->
			<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

				<!-- Sidebar Toggle (Topbar) -->
				<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
					<i class="fa fa-bars"></i>
				</button>
				<ul class="navbar-nav ml-auto">

					<div class="topbar-divider d-none d-sm-block"></div>

					<!-- Nav Item - User Information -->
					<li class="nav-item dropdown no-arrow">
						<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown"
						   aria-haspopup="true" aria-expanded="false">
							<span class="mr-2 d-none d-lg-inline text-gray-600 small">Admin</span>
							<img class="img-profile rounded-circle" src="../img/admin.jpg">
						</a>
						<!-- Dropdown - User Information -->
						<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
							<a class="dropdown-item" href="/deploy/logout/">
								<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
								退出
							</a>
						</div>
					</li>

				</ul>

			</nav>
			<!-- End of Topbar -->

			<!-- Begin Page Content -->
			<div class="container-fluid">
				<el-form :model="host" :rules="rules" ref="host" label-width="100px" class="host">
					<!-- Page Heading -->
					<h1 class="h3 mb-2 text-gray-800">主机管理</h1>
					<h2 class="h5 mb-2 text-gray-800">主机作为运行区块链网络的载体，可以使用虚拟机或物理机，支持单体服务器或kubernetes集群</h2>
					<div style="text-align: left;;;margin-bottom: 20px;">
						<el-button type="primary" @click="open('host')">添加</el-button>
					</div>
					<template>
						<el-table :data="tableData" style="width: 100%">
							<el-table-column prop="mark" label="别名" width=":10%">
							</el-table-column>
							<el-table-column prop="ip" label="服务器IP" width=":20%">
							</el-table-column>
							<el-table-column prop="name" label="用户名" width=":10%">
							</el-table-column>
							<el-table-column prop="password" label="密码"  width=":20%">
							</el-table-column>

							<el-table-column label="操作">
								<template slot-scope="scope">
									<!--											<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
									<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
								</template>
							</el-table-column>

						</el-table>
					</template>
					<!--							<div class="block" style="text-align: right;margin-top: 20px;">-->
					<!--								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3"-->
					<!--								 :page-size="100" layout="prev, pager, next, jumper" :total="1000">-->
					<!--								</el-pagination>-->
					<!--							</div>-->
					<el-dialog title="添加" :visible.sync="dialogVisible" width="500" :before-close="handleClose" :close-on-click-modal="false">

						<el-form-item label="别名" prop="mark">
							<el-input v-model="host.mark" placeholder="输入服务器别名，如h1" clearable></el-input>
						</el-form-item>
						<el-form-item label="服务器IP" prop="ip">
							<el-input v-model="host.ip" placeholder="输入服务器地址" clearable></el-input>
						</el-form-item>
						<el-form-item label="用户名" prop="name">
							<el-input v-model="host.name" placeholder="输入用户名" clearable></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="host.password" placeholder="输入密码" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('host')" >立即创建</el-button>
							<el-button @click="resetForm('host')">重置</el-button>
						</el-form-item>

					</el-dialog>
				</el-form>
			</div>
			<!-- /.container-fluid -->

		</div>
		<!-- End of Main Content -->

		<!-- Footer -->
		<footer class="sticky-footer bg-white">
			<div class="container my-auto">
				<div class="copyright text-center my-auto">
					<span>Copyright &copy; 卓繁信息 2020</span>
				</div>
			</div>
		</footer>
		<!-- End of Footer -->

	</div>
	<!-- End of Content Wrapper -->

</div>

<!-- Bootstrap core JavaScript-->
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/bootstrap-4.2.1.js"></script>

<!-- Core plugin JavaScript-->
<script src="../vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="../js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="../vendor/datatables/jquery.dataTables.min.js"></script>
<script src="../vendor/datatables/dataTables.bootstrap4.min.js"></script>

<!-- Page level custom scripts -->
<script src="../js/demo/datatables-demo.js"></script>
<script src="../js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../js/element.js"></script>
<script>
	var host = new Vue({
		el: '#wrapper',
		data() {
			var ipLimit = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入ip'));
				} else {
					if (/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.test(value) && parseInt(RegExp.$1) < 256 && parseInt(
							RegExp.$2) < 256 && parseInt(RegExp.$3) < 256 && parseInt(RegExp.$4) < 256) {
						callback();
					} else {
						callback(new Error('请输入正确的ip地址'));
					}
				}
			};
			var markLimit = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入别名'));
				} else {
					const name= /^[a-z0-9]*$/
					if (name.test(value)) {
						callback();
					}else{
						callback(new Error('请输入正确的别名 仅小写字母和数字可用'));
					}

				}
			};
			return {
				dialogVisible: false,
				tableData: [],
				host: {
					mark: '',
					name: '',
					ip: '',
					password: '',
					status: '0'
				},
				rules: {
					mark: [{
						required: true,
						validator: markLimit,
						trigger: 'blur'
					}],
					ip: [{
						required: true,
						validator: ipLimit,
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请填写用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请填写密码',
						trigger: 'blur'
					}]
				}
			}
		},
		mounted() {
			var _this = this;
			axios.post('/deploy/hostList')
					.then(function(res) {
						_this.tableData = res.data;
						for(let i=0;i<res.data.length;i++){
							_this.tableData[i].password="*******"
						}
					})
					.catch(function(error) {
						alert(error)
					})
		},
		methods: {
			alterForm(formName) {
				var _this = this;
				axios.post('/deploy/alterHost',_this.host)
						.then(function(res) {
							alert(res.data.data);
							window.location.reload()
						})
						.catch(function(error) {
							alert(error)
						})
			},

			handleDelete(index, row) {
				console.log(index, row);
				var _this = this;
				_this.$confirm('确认删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post('/deploy/delHost', _this.tableData[index])
							.then(function (res) {
								// alert("删除成功")
								window.location.reload()
							})
				}).catch(() => {

				});
			},
			// handleSizeChange(val) {
			// 	console.log(`每页 ${val} 条`);
			// },
			// handleCurrentChange(val) {
			// 	console.log(`当前页: ${val}`);
			// },
			handleClose(done) {
				this.dialogVisible = false;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var _this = this;
						axios.post('/deploy/addHost',_this.host)
								.then(function(res) {
									alert(res.data.data)
									window.location.reload()
								})
								.catch(function(error) {
									alert(error)
								})
					}else{
						console.log('error submit!!');
						return false;
					}
				});
			},
			open(formName) {
				this.$refs[formName].resetFields();
				this.dialogVisible = true;
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		},
		computed: {
			ipMonitor() {
				return this.host.ip;
			}
		},
		watch: {
			ipMonitor(val) {

			}
		},
	})

</script>
</body>

</html>
